<template>
    <div class="create-tag">
        <el-button type="text" icon="Plus" @click="showDialog = true"> {{ buttonText || "创建标签"}} </el-button>
        <el-dialog title="创建标签" v-model="showDialog">
            <el-form  ref="tagRef" :model="tagForm" :rules="tagRules">
                <el-form-item label="标签名称" prop="name" >
                    <el-input v-model="tagForm.name" placeholder="name"></el-input>
                </el-form-item>
                <el-form-item label="标签英文" prop="slug">
                    <el-input v-model="tagForm.slug" placeholder="slug"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="showDialog = false">取消</el-button>
                <el-button type="primary" @click="handleCreateTag">创建</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>

import { ref, defineProps, defineEmits, onMounted, watch } from 'vue';
import blogApi from '../api/blog.js';

//定义props
const props = defineProps({
    // 控制对话框显示
    modelValue: {
        type: Boolean,
        default: false
    },
    // 按钮文本
    buttonText: {
        type: String,
        default: '创建标签'
    }
});

// 定义事件
const emit = defineEmits(['update:modelValue', 'created', 'error'])

const showDialog = ref(props.modelValue);

const tagRef = ref(null);
const tagForm = ref({
    name: '',
    slug: '',
});

// 验证规则
const tagRules = ref({
  name: [
    { required: true, message: '请输入标签名称', trigger: 'blur' },
    { min: 2, max: 20, message: '标签名称长度应在2-20个字符之间', trigger: 'blur' }
  ],
  slug: [
    { required: true, message: '请输入标签英文', trigger: 'blur' },
    { min: 2, max: 20, message: '标签英文长度应在2-20个字符之间', trigger: 'blur' }
  ]
})

const handleCreateTag = async () => {
    console.log(tagForm.value);
    const res = await blogApi.CreateTag(tagForm.value);
    if (res.code === 0) {
        ElMessage.success('创建成功');
        emit('created', res.data);
        showDialog.value = false;
    }
    else {
        ElMessage.error(res.msg);
        emit('error', res.msg);
    }
    tagRef.value.resetFields();
    tagForm.value.name = '';
    tagForm.value.slug = '';
}


//监听
watch(() => props.modelValue, (newVal) => {
    showDialog.value = newVal;
})

watch(showDialog, (newVal) => {
    emit('update:modelValue', newVal)
})
</script>

<style scoped>
.create-tag .el-dialog {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.create-tag .el-dialog__title {
  color: var(--text-primary);
}

.create-tag .el-form-item__label {
  color: var(--text-primary);
}

.create-tag .el-input__inner {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  transition: all 0.3s ease;
}

.create-tag .el-input__inner:focus {
  border-color: var(--highlight);
}

.create-tag .el-button--primary {
  background-color: var(--highlight);
  border-color: var(--highlight);
  transition: all 0.3s ease;
}

.create-tag .el-form-item {
  margin-bottom: 20px; /* 增加表单项之间的垂直间距 */
}

.create-tag .el-button--primary:hover {
  opacity: 0.9;

}</style>